<template>
  <a-modal
    :width="1000"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 占用记录</template>
    <div>
      <TableTurn :table-data="getData" :args="args" ref="tableRef">
        <a-table-column
          :width="80"
          title="销售订单编号"
          data-index="orderNumber"
          align="center"
        >
        </a-table-column>
        <a-table-column
          :width="80"
          title="客户名称"
          data-index="clientName"
          align="center"
        >
        </a-table-column>
        <a-table-column
          :width="80"
          title="物料名称"
          data-index="name"
          align="center"
        >
        </a-table-column>
        <a-table-column
          :width="80"
          title="占用数量"
          data-index="occupiedAmount"
          align="center"
        >
        </a-table-column>
        <a-table-column
          :width="80"
          title="操作"
          data-index="occupiedAmount"
          align="center"
        >
          <template #cell="{ record }">
            <a-space>
              <a-button type="text" @click="putOccupied(record)"
                >编辑占用</a-button
              >
              <a-button type="text" status="danger" @click="delOccupied(record)"
                >取消占用</a-button
              >
            </a-space>
          </template>
        </a-table-column>
      </TableTurn>
    </div>
  </a-modal>
  <OccupiedVue
    v-model:visible="OutboundVisible"
    :occupiedInfo="OccupiedInfo"
    @poductOccupiedEdit="poductOccupiedEdit"
  />
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  import {
    getPoductOccupiedAll,
    putPoductOccupied,
  } from '@/api/order-management/client-order/index';
  import OccupiedVue from '../occupancy/index.vue';
  // import { cloneDeep } f rom 'lodash';

  const tableRef = ref();
  const OutboundVisible = ref(false);
  const OccupiedInfo = ref({});
  const props = withDefaults(
    defineProps<{
      OccupiedId: number;
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );

  // 表格配置
  const args = reactive({
    stripe: true,
    // rowSelection: {
    //   type: 'checkbox',
    //   showCheckedAll: true,
    //   onlyCurrent: false,
    // },

    bordered: {
      headerCell: true,
    },
    rowKey: 'name', // 批量选择按钮以客户名称来作为key
  });
  const emit = defineEmits(['update:visible', 'occupiedEdit']);

  const getData = async (page: any) => {
    try {
      const res = await getPoductOccupiedAll({ ...page, id: props.OccupiedId });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const putOccupied = (val: any) => {
    OccupiedInfo.value = val;
    OutboundVisible.value = true;
  };

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  const poductOccupiedEdit = async (val: any) => {
    modalVisible.value = false;
    emit('occupiedEdit', val);
  };

  const delOccupied = async (val: any) => {
    modalVisible.value = false;
    val.occupiedAmount = 0;
    emit('occupiedEdit', val);
  };
</script>

<style scoped lang="less">
  .demo-basic {
    margin-top: 5px;
    width: 500px;
    // margin: auto;
    background-color: aliceblue;
  }
</style>
